<template>
  <div id="contain">
    <div id="todos">
      <input type="text" placeholder="add your task" v-model.trim="doSomething" @keyup.enter="addTask">
      <el-button class="addBtn" type="info" @click="addTask">添加</el-button>
    </div>

    <div class="tesks">
      <TransitionGroup name="list">
      <div id="test"  v-for="(test,id) in tests" :key="id">
        <span class="doTest">
            <el-switch
              v-model="test.check"
              class="complete"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
            >
            </el-switch>
          <span :class="[test.check ? completed : '']">{{test.test}}</span>
        </span>
        <el-button class="delBtn" type="danger" @click="deleteTask(id)">删除</el-button>
      </div>
      </TransitionGroup>
    </div>
  </div>
</template>

<script setup>
import {Check,Delete,Close} from '@element-plus/icons-vue'
import { ref,reactive,computed } from 'vue';
import { gsap } from 'gsap'
const doSomething = ref('')
const completed = ref('completed')
const tests = reactive([
  {id:0,test:'任务1',check:false},
  {id:1,test:'任务2',check:false},
  {id:2,test:'玩游戏',check:false},
  {id:3,test:'玩电脑',check:false},
  ]);
const addTask = () => {
  if(!doSomething.value){return false}
  const id = tests.length;
  tests.push({id,test:doSomething.value,check:false})
  doSomething.value = ''
}
const deleteTask = (id) => {
  tests.splice(id,1)
}
</script>

<style scoped>
#contain{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#todos{
  height: 33px;
  display:flex;
}
#todos input{
  width: 100%;
  border-radius: 5px;
  padding-left: 5px;
}
#todos button{
  width: 50px;
}

.tesks{
  margin-top: 10px;
  overflow: auto;
}
/* 隐藏滚动条 */
.tesks::-webkit-scrollbar{
  display: none;
}
#test {
  display: flex;
}
#test:not(:first-child){
  margin-top: 10px;
}
.doTest,.delBtn{
  /* 显示任务的框的高度 */
  --toDestHeight:30px;
  height: var(--toDestHeight);
  line-height: var(--toDestHeight);
}

.completed{
  text-decoration: line-through;
  text-decoration-color:#2c3e50;
}
.doTest{
  width: 100%;
  background-color: var(--bg-seco);
  text-align: left;
  border-radius: 5px;
}
.complete{
  margin: 0 5px;
}
.delBtn{
  width: 50px;
}
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>